<template>
  <div class="index">
    <header class="header">
      <a href="javascript:window.history.back()">
        <!-- <router-link to="/"> -->
            <i class="return-back"></i>
        <!-- </router-link> -->
      </a>
      <p class="head-tit">{{name}}</p>
    </header>
    <div class="container has-header">
      <div class="has-nav">
        <banner></banner>
        <!-- <mt-swipe :auto="5000">
          <mt-swipe-item>
            <div class="banner-img">
                <img src="/static/imgs/banner_zs.jpg"/>
            </div>
          </mt-swipe-item>
          <mt-swipe-item>
            <div class="banner-img">
                <img src="/static/imgs/banner_zs.jpg"/>
            </div>
          </mt-swipe-item>
          <mt-swipe-item>
            <div class="banner-img">
                <img src="/static/imgs/banner_zs.jpg"/>
            </div>
          </mt-swipe-item>
        </mt-swipe> -->
      </div>
      <div class="explain-con">
          <template v-if="sort==1">
              <qgwanfa :type='name'></qgwanfa>
          </template>
           <template v-if="sort==2">
              <dfwanfa :type='name'></dfwanfa>
          </template>
           <template v-if="sort==3">
              <gpwanfa :type='name'></gpwanfa>
          </template>
      </div>
    </div>
  </div>
</template>
<script>
import { Swipe, SwipeItem } from "mint-ui";
import banner from '../../components/banner'
import qgwanfa from './components/qgwanfa'
import dfwanfa from './components/dfwanfa'
import gpwanfa from './components/gpwanfa'
export default {
  name: "explain",
  components: {
    mtSwipe: Swipe,
    mtSwipeItem: SwipeItem,
    qgwanfa,
    dfwanfa,
    gpwanfa,
    banner
  },
  data: function() {
    return {
        sort:1,
        name:String
    };
  },
  created() {
    let id =Number(this.$route.params.cid);
    if(id>0 && id<100){
      this.sort=1
    }else if(id>1000&&id<=1057){
      this.sort=3
    }else{
      this.sort=2
    }
    this.name=this.$route.params.value;
	},
  
};
</script>
<style lang="less" scoped>

.header {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 10;
  width: 100%;
  height: 44px;
  line-height: 44px;
  background: #fff;
}

.header:before {
  position: absolute;
  z-index: 2;
  content: "";
  width: 100%;
  height: 1px;
  bottom: 0;
  left: 0;
  border-bottom: 1px solid #d8d8d8;
  -webkit-transform: scaleY(0.5);
  transform: scaleY(0.5);
}

.header .head-tit {
  width: 50%;
  font-size: 18px;
  text-align: center;
  color: #333;
  margin: 0 auto;
  overflow: hidden;
  white-space: nowrap;
  word-break: keep-all;
  -ms-text-overflow: ellipsis;
  text-overflow: ellipsis;
}

.header .return-back {
  position: absolute;
  top: 50%;
  margin-top: -12px;
  left: 15px;
  width: 24px;
  height: 24px;
  line-height: 0;
  vertical-align: middle;
  display: inline-block;
  background: url()
    50%;
  background-size: contain;
}
.container {
  box-sizing: border-box;
  background: #fff;
}

.container.has-header {
  padding-top: 44px;
}
// .has-nav {
//     padding-top: .4rem
// }

.has-nav {
  width: 100%;
  position: fixed;
  z-index: 8;
}

.has-header .has-nav {
  top: 44px;
}

.has-nav {
  top: 0;
  width: 100%;
  height: 1.2rem;
  .banner-img{
      width: 100%;
      height: 1.2rem;
      img{
          width: 100%;
          height: 100%;
      }
  }
}

.explain-con{
    margin-top: 1.2rem;
    text-align: start;
}
</style>
